
import React, {useEffect} from 'react';
import {Input, Button, Card, Form,Breadcrumb,Space,} from 'antd';
import {useParams} from 'react-router-dom';
import tabsApi from '../../api/tabs';

export default () => {
  let params = useParams ();
  // console.log (params);
  let tabsId = params.id;
  let tabsName = params.name;
  // console.log(tabsName);
  const layout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16},
  };
  const onFinish = async values => {
    // console.log (values);
    let newData = values.name;
    console.log (newData);
    await tabsApi.changeItem ({_id:tabsId, name:newData});
  };
  const validateMessages = {
    required: '${label}不能为空!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };


  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
      <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>商品类型</Breadcrumb.Item>
            <Breadcrumb.Item>商品类型列表</Breadcrumb.Item>
            <Breadcrumb.Item>商品类型修改</Breadcrumb.Item>
          </Breadcrumb>
 
        </Card>
        <Card style={{ height: "640px",display:'flex',justifyContent:'center' }}>
        <Form
          style={{margin: '80px 20px'}}
          {...layout}
          name="nest-messages"
          onFinish={onFinish}
          validateMessages={validateMessages}
        >
          <Form.Item name="name"  label="商品类型名称" rules={[
                {
                  required: true,
                },
              ]} initialValue={tabsName}>
            <Input placeholder="请输入类别" value={tabsName}  style={{width: '400px',marginBottom:'40px'}} />
            <Button type="primary" htmlType="submit">提交</Button>
          </Form.Item>
          
        </Form>
      </Card>
      </Space>
    </div>
  );
};
